<template>
    <el-dialog v-model="openRelationship" title="关联家庭成员" width="360">
        <el-form ref="ruleFormRef" :rules="rules" label-width="auto" :model="formData" class="demo-form-inline"
            style="--el-font-size-base:13px;">
            <el-form-item label="选择成员" prop="otherId" style="margin-bottom: 20px;">
                <el-select clearable v-model="formData.otherId">
                    <el-input v-model="name" style="width: 200px;height: 30px;" placeholder="搜索居民姓名"
                        :suffix-icon="Search" />
                    <el-option :value="item._id" :label="item.name + ' ' + (item.gender ? '男' : '女')"
                        v-for="item in residentData" />

                </el-select>
            </el-form-item>
            <el-form-item label="选择关系" prop="relationship">
                <el-select clearable v-model="formData.relationship">
                    <el-option value="父母" label="父母" />
                    <el-option value="配偶" label="配偶" />
                    <el-option value="姐妹" label="姐妹" />
                    <el-option value="兄弟" label="兄弟" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="openRelationship = false">取消</el-button>
                <el-button type="primary" @click="addRelation">确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { addResidentRelationApi, findResidentInfoApi } from '../../api/resident';
import { Search } from '@element-plus/icons-vue'
const openRelationship = ref(false)
const formData = ref({
    otherId: '',
    ownId: '',
    relationship: ''
})

const emit = defineEmits(['getResidentDetail', 'getRelation'])

const name = ref('')
watch(name, () => {
    findResident()
})



// 表单验证
const rules = ref({
    otherId: [
        { required: true, message: '成员不能为空', trigger: 'change' },

    ],
    relationship: [
        {
            required: true,
            message: '关系不能为空',
            trigger: 'change',
        },
    ]

})
const ruleFormRef = ref()

// 居民数据
const residentData = ref([])

onMounted(() => {
    findResident()
})
// 获取居民数据
function findResident() {
    findResidentInfoApi({
        name: name.value

    })
        .then(res => {
            if (res.code == 200) {
                residentData.value = res.data.rows

            }
        })
}

// 打开弹窗
function addRelationship(data) {

    if (data) {
        openRelationship.value = true
        formData.value.ownId = data
    }

}

defineExpose({
    addRelationship
})

// 添加关系
function addRelation() {
    addResidentRelationApi(formData.value)
        .then(res => {
            if (res.code == 200) {
                openRelationship.value = false
                emit('getResidentDetail')
                emit('getRelation')
                ElMessage({
                    message: '居民关系添加成功',
                    type: 'success',
                })
                // nowResident.value = res.data._id
            } else {
                ElMessage.error(res.message)
            }
        })
}

</script>

<style scoped>
.el-select,
.el-input {
    height: 40px;
    width: 200px;
}
</style>